<template>
  <div class="conetnt-page">
    <div class="page-top">
      <el-button type="primary" :icon="Back" @click="backEvent">返回</el-button>
      <el-button type="primary" :icon="StarFilled">保存</el-button>
      <el-button type="danger" :icon="Plus" @click="addRowData">添加行数据</el-button>
    </div>
    <div class="page-box">
      <Grid></Grid>
    </div>
    <!-- 添加/修改行数据模态框 -->
    <Modal class="w-[40%]" title="添加/修改行数据">
      <el-form :model="modalForm" label-width="auto" style="max-width: 500px;">
        <el-form-item label="选择订单">
          <el-input v-model="modalForm.productOrder">
            <template #append>
              <el-button :icon="Search" @click="openOrderModal"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="车间">
          <el-input v-model="modalForm.workshop" disabled/>
          <el-button type="primary" :icon="Edit" style="margin-left: 8px;"></el-button>
        </el-form-item>
        <el-form-item label="线体">
          <el-select v-model="modalForm.line" placeholder="选择当前车间的线体">
            <el-option label="线体一" value="1"></el-option>
            <el-option label="线体二" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺">
          <el-select v-model="modalForm.line" placeholder="选择当前线体的工艺">
            <el-option label="工艺1" value="1"></el-option>
            <el-option label="工艺2" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Modal>
    <!-- 选择订单数据模态框 -->
    <Modal2 class="w-[70%]" title="选择订单">
      <div class="modal-content" style="height: 500px;">
        <Grid2></Grid2>
      </div>
    </Modal2>
  </div>
</template>

<script lang="ts" setup>
//@ts-ignore
import { useRouter,useRoute } from "vue-router";
import { ElMessage, ElMessageBox, ElInput,ElForm,ElFormItem,ElSelect,ElOption, ElDialog,ElButton,ElLoading,ElTag,ElDatePicker, formatter} from "element-plus";
import { Plus,Back,StarFilled,Search,Edit } from '@element-plus/icons-vue';
import { Button, Upload, RadioButton, RadioGroup } from "ant-design-vue";
import { useVbenVxeGrid } from "#/adapter/vxe-table";
import { useVbenModal } from '@vben/common-ui';
import { nextTick, ref, onUnmounted, onMounted,reactive, unref, watch } from "vue";
import { dealVxeGridFilterParameter } from "#/utils/tools";
const router = useRouter();

const modalForm = reactive({
  productOrder:"",
  workshop:"",
  line:""
})

//选择订单临时存储
const selectedOrders = new Map();

const [Modal, modalApi] = useVbenModal({ draggable:true,closeOnClickModal:false });
const [Modal2, modalApi2] = useVbenModal({ draggable:true,closeOnClickModal:false });

const gridOptions = ref({
  columns: [
    { title: "#", type: "seq", width: 50 },
    {
      field:"field1",
      title:"订单",
      editRender:{
        name:"ElSelect",
        options:[
            { label:"订单1",value:"订单1" }
        ],
        props:{
          size:"small"
        }
      },
      width:""
    },
    { field:"field2",title:"车间",width:"",
      editRender:{
        name:"ElInput",
      }
    },
    { field:"field3",title:"线体",width:"" },
    { field:"field4",title:"工艺",width:"" }
  ],
  toolbarConfig: {
    visible:false,
    search: false,
    custom: true,
    refresh: true,
    zoom: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'cell'
  },
  filterConfig: {
    remote: true
  },
  rowConfig: {
    isCurrent: true,
    isHover: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: false,
    pageSize: 20,
    pageSizes: [10, 20, 30, 50, 100]
  },
  height: "auto",
  data: [{field1:"1",field2:"2",field3:"3",field4:"4",}]
});
const gridEvents = {
  editClosed:({ row, column }) => {
    console.log(row, column ,'-------------------');
  }
}
const [Grid, gridApi] = useVbenVxeGrid({formOptions: null,gridOptions: gridOptions,gridEvents: gridEvents});

const gridOptions2 = ref({
  columns: [
    { type: 'checkbox', width: 60 },
    { title: "序号", type: "seq", width: 50 },
    { field:"", title:"销售订单号", width:"180" },
    { field:"", title:"物料名称", width:"180" },
    { field:"", title:"物料编码", width:"150" },
    { field:"", title:"物料规格描述", width:"150" },
    { field:"", title:"订单要求", width:"150" },
    { field:"", title:"需求数量", width:"150" },
    { field:"", title:"排成数量", width:"150" },
    { field:"", title:"订单日期", width:"180" },
    { field:"", title:"制令号", width:"180" },
    { field:"", title:"生产任务单", width:"180" },
    { field:"", title:"计划发货日", width:"180" },
    { field:"", title:"备注", width:"180" }
  ],
  toolbarConfig: {
    search: false,
    custom: true,
    export: false,
    refresh: true,
    zoom: true
  },
  filterConfig: {
    remote: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: true,
    pageSize: 10,
    pageSizes: [10, 20, 30, 50, 100]
  },
  height: "100%",
  autoResize:true,
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    showStatus: true,
    autoClear: false
  },
  checkboxConfig: {
    highlight: true
  },
  proxyConfig: {
    autoLoad: true,
    ajax: {
      query: async ({ page }, formValues) => ({ items:[{a:1},{a:2}],total:2 })
    }
  }
});
const gridEvents2 = {
  checkboxChange: ({ checked,row,rowIndex }) => checkboxChangeEvent({ checked,row,rowIndex })
}
const [Grid2, gridApi2] = useVbenVxeGrid({formOptions: null,gridOptions: gridOptions2,gridEvents: gridEvents2});


const backEvent = () => {
  router.back();
}
const addRowData = () => {
  modalApi.open();
}
const openOrderModal = () => {
  modalApi2.open();
}
const checkboxChangeEvent = (option) => {
  const { checked,row,rowIndex } = option;
}
</script>

<style lang="scss" scoped>
.conetnt-page{
  width: 100%;
  height:100vh;
  box-sizing: border-box;
}
.page-top{
  width: 100%;
  height:50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.page-box{
  width: 100%;
  height:calc(100% - 50px);
}

:deep(.el-form-item__content){
  flex-wrap: nowrap !important;
}
</style>